<template>
  <div class="logistics-detail-page">
    <!-- 顶部导航 -->
    <el-page-header
        @back="handleBack"
        content="物流详情"
        class="page-header"
    />

    <!-- 订单基本信息卡片 -->
    <el-card class="order-info-card">
      <div class="order-header">
        <div class="order-title">
          <h2>订单 {{ orderInfo.orderNo }}</h2>
          <el-tag
              :type="logisticsInfo.status === 'signed' ? 'success' : 'primary'"
              class="status-tag"
          >
            {{ getStatusText(logisticsInfo.status) }}
          </el-tag>
        </div>
        <div class="order-date">
          <span>下单时间: {{ formatDate(orderInfo.createTime) }}</span>
        </div>
      </div>

      <div class="goods-info">
        <el-image
            :src="orderInfo.productImage"
            alt="商品图片"
            class="product-image"
        />
        <div class="product-details">
          <h3 class="product-name">{{ orderInfo.productName }}</h3>
          <div class="product-attrs">
            <span v-for="(attr, index) in orderInfo.attributes" :key="index">
              {{ attr.name }}: {{ attr.value }}
            </span>
          </div>
          <div class="product-price">
            <span class="price-label">单价:</span>
            <span class="price-value">¥{{ orderInfo.unitPrice.toFixed(2) }}</span>
            <span class="quantity">x{{ orderInfo.quantity }}</span>
          </div>
        </div>
        <div class="order-summary">
          <div class="summary-item">
            <span class="summary-label">收件人:</span>
            <span class="summary-value">{{ orderInfo.recipientName }} {{ orderInfo.recipientPhone }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">收货地址:</span>
            <span class="summary-value">{{ orderInfo.deliveryAddress }}</span>
          </div>
          <div class="summary-item total-amount">
            <span class="summary-label">订单总金额:</span>
            <span class="summary-value">¥{{ orderInfo.totalAmount.toFixed(2) }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 物流地图卡片 -->
    <el-card class="map-card">
      <div slot="header">
        <h3>物流地图</h3>
      </div>
      <div class="map-container">
        <img src="https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=4&size=1280*1280&key=31796c0b7beeca100b8e1b31c9bb63b6&markers=mid,0xFF0000,A:116.37359,39.92437|mid,0xFF0000,B:110.2900,25.2736&paths=5,0x0000ff,1,,:116.37359,39.92437;114.5149,38.0428">
      </div>
    </el-card>

    <!-- 物流跟踪信息 -->
    <el-card class="timeline-card">
      <div slot="header" class="timeline-header">
        <h3>物流跟踪</h3>
        <div class="logistics-company">
          <span>物流公司: {{ logisticsInfo.company }}</span>
          <span class="waybill-no">运单号: {{ logisticsInfo.waybillNo }}</span>
        </div>
      </div>

      <div class="logistics-timeline">
        <el-timeline>
          <el-timeline-item
              v-for="(event, index) in logisticsInfo.timeline"
              :key="index"
              :timestamp="formatDate(event.time)"
              :type="index === 0 ? 'success' : 'primary'"
              :color="index === 0 ? '#52C41A' : undefined"
              :size="index === 0 ? 'large' : 'normal'"
          >
            <div class="timeline-content">
              <h4 class="event-title">{{ event.title }}</h4>
              <p class="event-description">{{ event.description }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="handleBack">返回订单列表</el-button>
      <el-button type="primary" @click="contactCourier" v-if="logisticsInfo.courier">
        <i class="el-icon-phone" /> 联系快递员
      </el-button>
      <el-button type="success" @click="confirmReceipt" v-if="logisticsInfo.status === 'transporting'">
        <i class="el-icon-check" /> 确认收货
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter,useRoute } from 'vue-router'
const route=useRoute();
const productId=ref(route.params.productId);
const orderId=ref(route.params.orderId);
console.log(productId.value,orderId.value);

// 订单基本信息
const orderInfo = ref({
  orderNo: 'ORD2023051200145',
  createTime: '2023-05-12T09:25:30',
  productName: '新款无线蓝牙耳机 主动降噪长续航',
  productImage: 'https://picsum.photos/100/100?random=1',
  attributes: [
    { name: '颜色', value: '白色' },
    { name: '版本', value: '标准版' }
  ],
  unitPrice: 299.00,
  quantity: 1,
  totalAmount: 299.00,
  recipientName: '张先生',
  recipientPhone: '138****5678',
  deliveryAddress: '上海市浦东新区张江高科技园区博云路2号浦软大厦15层1503室'
});

// 物流信息
const logisticsInfo = ref({
  status: 'transporting', // transporting: 运输中, signed: 已签收
  company: '顺丰速运',
  waybillNo: 'SF1234567890123',
  from: '广东省深圳市南山区科技园',
  to: '上海市浦东新区张江高科技园区',
  currentLocation: '江苏省苏州市昆山市转运中心',
  estimatedArrival: '2023-05-14T15:30:00',
  courier: {
    name: '李师傅',
    phone: '139****1234'
  },
  timeline: [
    {
      time: '2023-05-13T10:45:00',
      title: '运输中',
      description: '包裹正在从苏州转运中心发往上海浦东集散中心'
    },
    {
      time: '2023-05-12T22:30:00',
      title: '已到达',
      description: '包裹已到达苏州转运中心'
    },
    {
      time: '2023-05-12T18:15:00',
      title: '已发出',
      description: '包裹已从深圳南山集散中心发出'
    },
    {
      time: '2023-05-12T14:00:00',
      title: '运输中',
      description: '包裹正在从深圳科技园营业点运往深圳南山集散中心'
    },
    {
      time: '2023-05-12T11:30:00',
      title: '已揽收',
      description: '快递员李师傅已揽收包裹，联系方式139****1234'
    },
    {
      time: '2023-05-12T10:15:00',
      title: '已下单',
      description: '商家已接收到您的订单，正在准备发货'
    }
  ]
});

// 格式化日期时间
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'transporting': '运输中',
    'signed': '已签收'
  };
  return statusMap[status] || status;
};

// 返回上一页
const handleBack = () => {
  // 实际项目中使用路由返回
  ElMessage.info('返回订单列表');
};

// 联系快递员
const contactCourier = () => {
  ElMessage.success(`正在拨打快递员 ${logisticsInfo.value.courier.name} 的电话: ${logisticsInfo.value.courier.phone}`);
};

// 确认收货
const confirmReceipt = () => {
  ElMessage.confirm('请确认您已收到商品？', '确认收货', {
    confirmButtonText: '确认收到',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    logisticsInfo.value.status = 'signed';
    // 添加一条新的时间线记录
    logisticsInfo.value.timeline.unshift({
      time: new Date().toISOString(),
      title: '已签收',
      description: '您已确认收到商品，感谢您的购买'
    });
    ElMessage.success('确认收货成功');
  }).catch(() => {
    ElMessage.info('已取消确认收货');
  });
};

// 初始化地图
const initMap = () => {
  // 这里是模拟地图初始化
  console.log('地图初始化完成');
  // 实际项目中，这里应该初始化地图实例并显示物流路线
  // 例如使用高德地图、百度地图或其他地图服务
};

// 页面挂载时初始化
onMounted(() => {
  initMap();
});
</script>

<style scoped>
.logistics-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 20px;
}

.order-info-card,
.map-card,
.timeline-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.order-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.order-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.order-title h2 {
  margin: 0;
  font-size: 18px;
  color: #1f2329;
}

.status-tag {
  font-size: 14px;
}

.order-date {
  color: #86909c;
  font-size: 14px;
}

.goods-info {
  padding: 20px;
  display: flex;
  gap: 20px;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.product-details {
  flex: 1;
  min-width: 0;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #1f2329;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  color: #4e5969;
  font-size: 14px;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-label {
  color: #86909c;
  font-size: 14px;
}

.price-value {
  color: #f53f3f;
  font-weight: bold;
  font-size: 16px;
}

.quantity {
  color: #4e5969;
  font-size: 14px;
}

.order-summary {
  min-width: 280px;
}

.summary-item {
  margin-bottom: 12px;
  font-size: 14px;
}

.summary-label {
  display: inline-block;
  width: 70px;
  color: #86909c;
}

.summary-value {
  color: #1f2329;
}

.total-amount {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px dashed #e4e7ed;
}

.total-amount .summary-value {
  color: #f53f3f;
  font-weight: bold;
  font-size: 16px;
}

.timeline-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logistics-company {
  display: flex;
  justify-content: space-between;
  color: #4e5969;
  font-size: 14px;
}

.waybill-no {
  font-family: monospace;
}

.logistics-timeline {
  padding: 10px 0;
}

.el-timeline {
  padding-left: 20px;
}

.el-timeline-item {
  padding-bottom: 20px;
}

.el-timeline-item__timestamp {
  color: #86909c;
  font-size: 13px;
  margin-bottom: 6px;
}

.timeline-content {
  background-color: #f7f8fa;
  padding: 12px 16px;
  border-radius: 6px;
  border-left: 3px solid #165DFF;
}

.el-timeline-item:first-child .timeline-content {
  border-left-color: #52C41A;
}

.event-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  color: #1f2329;
}

.event-description {
  margin: 0;
  color: #4e5969;
  font-size: 14px;
  line-height: 1.5;
}

.map-container {
  position: relative;
  height: 1280px;
  width: auto;
  overflow: hidden;
  border-radius: 4px;
}

.map-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .goods-info {
    flex-direction: column;
  }

  .order-summary {
    min-width: auto;
    margin-top: 15px;
  }

  .map-container {
    height: 300px;
  }

  .logistics-company {
    flex-direction: column;
    gap: 6px;
  }
}
</style>